<template>
  <div class="cesium-render">
    <component
      v-for="item in stageStore.layers"
      :is="getRender(item)"
      :key="item.id"
      :data="item"
    />
  </div>
</template>

<script lang="ts" setup>
import { useStageStore } from '@/store/stage';
import * as componentsAny from '../../stage/components';

const components: any = componentsAny;
const stageStore = useStageStore();

const getRender = (item: any) => {
  const type = item.type?.toUpperCase();
  return components[type]?.render || components.DEFAULT?.render;
};
</script>

<style lang="less" scoped>
.cesium-render {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
</style>
